{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/member/sousuo.css">
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
<style>

    .am-header-default{
        background-color: #fff;
    }
</style>
{/block}
{block name="head"}
<header data-am-widget="header"
        class="am-header am-header-default">
    <div class="am-header-left am-header-nav" onclick="history.back(-1)">
        <span class="icon iconfont icon-xiangzuojiantou" style="color: #989898;"></span>
    </div>

    <h1 class="am-header-title" style="color:#424242;">
        搜索页面
    </h1>

    <div class="am-header-right am-header-nav">
        <a href="{:url('search')}"><span class="icon iconfont icon-sousuo" style="color: #989898;"></span></a>
    </div>

</header>



{/block}
{block name="body"}
<div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
    <div class="am-u-sm-12">
        <input type="text" class="" id="goods_name" name="goods_name" placeholder="输入关键字" style="
        background:#ffffff;width:100%;height: 46px;outline: none;margin-top: 20px;" value="">
        <span class="icon iconfont icon-sousuo" style="position: relative;right: 90px;top: 10px;"></span>
        <button type="button" class="am-btn am-radius" onclick="msearch()"
                                 style="position: relative;right: 90px;top: 10px;height: 46px;">搜索
    </button>
    </div>
</div>
<div data-am-widget="list_news" class="am-list-news am-list-news-default" >
    <div class="am-list-news-bd">
<div class="am-g">
    <div class="am-u-sm-12">
        <span>橱柜</span>
        <span>衣柜</span>
        <span>欧式</span>
        <span>风格</span>
        <span>鞋柜</span>
        <span>中式风格</span>
    </div>
</div>
        <ul class="am-list" id="list">
        </ul>
    </div>
</div>




<!--<div data-am-widget="list_news" class="am-list-news am-list-news-default" >-->
    <!--<div class="am-list-news-bd">-->
        <!--<ul class="am-list" id="list">-->
            <!--<li style="height: 43px;line-height: 43px;">橱柜</li>-->
            <!--<li style="height: 43px;line-height: 43px;">衣柜</li>-->
            <!--<li style="height: 43px;line-height: 43px;">欧式风格</li>-->
            <!--<li style="height: 43px;line-height: 43px;">鞋柜</li>-->
            <!--<li style="height: 43px;line-height: 43px;">中式风格</li>-->
            <!--&lt;!&ndash;缩略图在标题左边&ndash;&gt;-->
        <!--</ul>-->
    <!--</div>-->

<!--</div>-->
<div id="page"></div>

{/block}
{block name="script"}
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="list-tpl">
    {{ each data as value index}}
    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
        <div class="am-u-sm-4 am-list-thumb">
            <a href="{{ value.url}}" class="">
                <img src="{{ value.goods_thumb}}" alt="{{ value.fulltitle}}" style="width: 117px;height: 117px;"/>
            </a>
        </div>

        <div class=" am-u-sm-8 am-list-main" style="margin-top: 15px;">
            <h3 class="am-list-item-hd">
                <a href="{{ value.url}}" class="">{{ value.fulltitle}}</a>
            </h3>

            <div class="am-list-item-text">
                价格：{{ value.simple_price}}元
            </div>

        </div>
    </li>
    {{ /each}}
</script>
<script>
    var datas = {
        goods_name:'{$goods_name}',
        page: 0
    };
    var drop = $('#page').dropload({  //定义检测的容器
        scrollArea: window,
        loadDownFn: function (me) {		//loadDownFn是检测是否加载下方，其余方向请到文档中查看
            datas.page++;			//每次都需要将页码加1
            // 拼接HTML
            $.ajax({
                type: 'POST',
                url: '{:url("search")}', data: datas, success: function (data) {
                    if (data.code == 0) {
                        layer.open({
                            content: data.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    var html = template('list-tpl', data);		//此处使用的是上章节介绍的模板引擎
                    $('#list').append(html);		//将生成好的html插入放置列表的容器内
                    if (datas.page >= data.last_page) {		//检测是否加载到最后一页
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    me.resetload();			//这句必须写
                }
            });

        }
    });
    function msearch() {
        datas.goods_name=$('#goods_name').val();
        datas.page=0;
        drop.noData(false);
        drop.unlock();
        $('#list').empty();
        drop.resetload();
    }
</script>
{/block}
